<template>
	<view class="content">
		<image src="../../static/top-bg.jpg" mode="aspectFill" class="top-bg"></image>
		<view class="goods-name">
			<view class="top-title">芒果西米露 <text class="money-text">¥25</text></view>
			<view class="order-button" @click="createOrder()">立即下单</view>
		</view>
		<view class="title-bar">
			<view class="title-text">
				我的订单
			</view>
			<view class="refresh-button" @click="loadOrders()">刷新订单</view>
		</view>
		<view class="order-item" v-if="orderList.length==0">
			<view class="line-two">暂无订单数据，点击立即下单添加订单。</view>
		</view>
		<view class="order-item" v-if="orderList.length>0" v-for="order in orderList">
			<view class="line-two">
				<view class="order-item-text bold">{{order.orderCode}}</view>
			</view>
			<view class="line-two">
				<view class="order-item-text">品名：{{order.goodsName}}</view>
				<view class="order-item-text">数量：*{{order.goodsCount}}份</view>
				<view class="order-item-text">总价：{{order.orderTotalPrice/100}}元</view>
			</view>
			<view class="line-two">
				<view class="order-item-text">配送员:</view>
				<view class="order-item-text bold">{{order.orderDeliverName}}</view>
			</view>
			<view class="line-two">
				<view class="order-item-text">下单时间：{{order.orderTime.replace('T',' ')}}</view>
				<view class="order-item-text status-text" :class="{
					'complete':order.orderStatus=='已完成',
					'deliving':order.orderStatus=='配送中',
					'deliveconfirm':order.orderStatus=='待配送',
					'making':order.orderStatus=='制作中',
					'confirm':order.orderStatus=='待确认'
				}">{{order.orderStatus}}</view>
			</view>
		</view>
		
	</view>
</template>
<style>
.content {
	width: 750rpx;
	display: flex;
	flex-direction: column;
}
.goods-name{
	display: flex;
	margin-bottom:10px;
	justify-content: space-around;
}
.title-bar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 2rpx #000 solid;
}
.refresh-button{
	background-color: #F0AD4E;
	padding:5px 10px;
	margin-right:5%;
	margin-top:20rpx;
	color:#fff;
	border-radius: 5px;
}
.top-bg {
	width: 750rpx;
	height: 350rpx;
}
.line-two {
	display: flex;
	margin: 0 5%;
	justify-content: space-between;
}

.top-title {
	margin-top: 10px;
	font-size: 130%;
	font-weight: bold;
}
.money-text{
	margin-left: 15rpx;
	font-size:90%;
	color:#f7cc52;
}
.order-button {
	margin-top: 10px;
	font-size: 110%;
	background-color: #55baa5;
	width: 220rpx;
	height: 70rpx;
	color: #ffffff;
	border-radius: 35rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.title-text{
	margin-top: 20rpx;
	margin-left: 5%;
	font-size: 110%;
	font-weight:bold;
}
.bold{
	font-size: 110%;
	font-weight:bold;
}
.order-item{
	width:700rpx;
	margin:10rpx 25rpx;
	padding-bottom: 30rpx;
	border-bottom:1px dashed rgba(55,200,105,0.8);
	
}
.order-item-text{
	margin-top: 15rpx;
	font-size: 100%;
}
.status-text{
	padding:5px 10px;
	background-color: #eee;
	border-radius: 5px;
}

.status-text.complete{
	background-color: #c5c5c5;
	color:#000;
}
.status-text.deliving{
	background-color: #dd5044;
	color:#fff;
}
.status-text.deliveconfirm{
	background-color: #2181ff;
	color:#fff;
}
.status-text.making{
	background-color: #55baa5;
	color:#fff;
}
.status-text.confirm{
	background-color: #aaa;
	color:#fff;
}
</style>
<script>
export default {
	data() {
		return {
			orderList:[]
		};
	},
	methods: {
		loadOrders(){
			uni.showLoading({
				title:"加载订单"
			})
			uni.request({
				url:'http://localhost:8080/api/orders/mine?user=admin',
				success:(result)=>{
					if(result.statusCode==200){
						this.orderList=result.data;
					}else{
						uni.showToast({
							title:"获取订单数据发生错误",
							icon:"none"
						})
					}
				},
				complete:()=>{
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			})
		},
		createOrder(){
			uni.showModal({
				title:"是否确认下单？",
				cancelText:"点错了",
				confirmText:"下单",
				success:(btn)=>{
					if(btn.confirm){
						uni.request({
							url:'http://localhost:8080/api/orders/create?goodsName=芒果西米露&goodsCount=1&goodsPrice=1500&totalPrice=1500&user=admin',
							method:'POST',
							success:(res)=>{
								if(res.statusCode==200){
									uni.showToast({
										title:'下单成功'
									})
									this.loadOrders();
								}
							}
						})
					}
				}
			})
		}
	},
	onLoad(){
		this.loadOrders()
	},
	onPullDownRefresh(){
		this.loadOrders()
	}
};
</script>
